<template>
  <div>
    <el-form ref="form" label-position="top" :model="editForm">
      <el-row :gutter="20" style="margin-left: 5px">
        <el-col :span="6">
          <el-form-item :label="$t('business.workload.type')" prop="type">
            <ko-data-item
              v-model="editForm.type"
              item-ype="flatSelect"
              :selections="type_list"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <div v-if="editForm.type === 'Container' || editForm.type === 'Pod'">
        <el-row :gutter="20" style="margin-left: 5px">
          <el-col :span="6">
            <el-form-item label="Min CPU" prop="cpuMin">
              <ko-data-item
                v-model="editForm.cpuMin"
                itemType="number"
                dividerName="mCPUs"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Max CPU" prop="memoryRequest">
              <ko-data-item
                v-model="editForm.cpuMax"
                itemType="number"
                dividerName="mCPUs"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-left: 5px">
          <el-col :span="6">
            <el-form-item label="Min Memory" prop="memoryMin">
              <ko-data-item
                v-model="editForm.memoryMin"
                itemType="number"
                dividerName="Mi"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Max Memory" prop="memoryMax">
              <ko-data-item
                v-model="editForm.memoryMax"
                itemType="number"
                dividerName="Mi"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <el-row
        v-if="editForm.type === 'PersistentVolumeClaim'"
        :gutter="20"
        style="margin-left: 5px"
      >
        <el-col :span="6">
          <el-form-item label="Min Storage" prop="storageMin">
            <ko-data-item
              v-model="editForm.storageMin"
              itemType="number"
              dividerName="Mi"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="Max Storage" prop="storageMax">
            <ko-data-item
              v-model="editForm.storageMax"
              itemType="number"
              dividerName="Mi"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";
import {
  cpuUnitConvert,
  memoryUnitConvert
} from "@/views/domain/kubeHud/utils/unitConvert";
import { LimitRange } from "../../../api/k8s";
import { computed, ref, watch } from "vue";

type Prop = {
  limitRangeObj?: any;
};

const props = defineProps<Prop>();
const emit = defineEmits(["update:limitRangeObj"]);

const editForm = ref({
  type: "",
  cpuMin: "",
  cpuMax: "",
  memoryMin: "",
  memoryMax: "",
  storageMin: "",
  storageMax: ""
});

const type_list = ["Pod", "Container", "PersistentVolumeClaim"];

watch(
  () => props.limitRangeObj,
  newVal => {
    if (newVal) {
      editForm.value.type = newVal.type;
      if (newVal.type === "PersistentVolumeClaim") {
        editForm.value.storageMin = newVal.min?.storage
          ? memoryUnitConvert(newVal.min.storage) + ""
          : "";
        editForm.value.storageMax = newVal.max?.storage
          ? memoryUnitConvert(newVal.max.storage) + ""
          : "";
      } else {
        editForm.value.cpuMin = newVal.min?.cpu
          ? cpuUnitConvert(newVal.min.cpu) + ""
          : "";
        editForm.value.cpuMax = newVal.max?.cpu
          ? cpuUnitConvert(newVal.max.cpu) + ""
          : "";
        editForm.value.memoryMin = newVal.min?.memory
          ? memoryUnitConvert(newVal.min.memory) + ""
          : "";
        editForm.value.memoryMax = newVal.max?.memory
          ? memoryUnitConvert(newVal.max.memory) + ""
          : "";
      }
    }
  }
);

const isPVC = computed(() => {
  return editForm.value.type === "PersistentVolumeClaim";
});

const transformation = spec => {
  if (editForm.value.type === "") {
    return;
  }
  if (!isPVC.value) {
    spec.limits = [
      {
        type: editForm.value.type,
        max: {
          cpu: editForm.value.cpuMax ? editForm.value.cpuMax + "m" : undefined,
          memory: editForm.value.memoryMax
            ? editForm.value.memoryMax + "Mi"
            : undefined
        },
        min: {
          cpu: editForm.value.cpuMin ? editForm.value.cpuMin + "m" : undefined,
          memory: editForm.value.memoryMin
            ? editForm.value.memoryMin + "Mi"
            : undefined
        }
      }
    ];
  } else {
    spec.limits = [
      {
        type: editForm.value.type,
        max: {
          storage: editForm.value.storageMax
            ? editForm.value.storageMax + "Mi"
            : undefined
        },
        min: {
          storage: editForm.value.storageMin
            ? editForm.value.storageMin + "Mi"
            : undefined
        }
      }
    ];
  }
};
</script>

<style scoped></style>
